<template>
    <div ref="circle" class="traffic-circle">
        <canvas ref="canvas"></canvas>
    </div>
</template>

<script>
    export default {
        props: {
            bgColor: {      //圆环背景颜色
                type: String,
                default: "#ddd"
            },
            ballColor: {
                type: String,
                default: "#25bdff"
            },
            circleColor: {  //圆环颜色
                type: String,
                default: "#2d8cf0"
            },
            size: {         //圆环大小
                type: [Number, String],
                default: 1
            },
            percent: {      //圆环的百分比
                type: [Number, String],
                default: 80
            },
            w: {            //画布的宽
                type: [Number, String],
                default: null
            },
            h: {            //画布的高
                type: [Number, String],
                default: null
            },
            startRadian: {  //初始角度
                type: [Number, String],
                default: Math.PI/2
            },
            time: {
                type: [Number, String],
                default: 1000
            }
        },
        data(){
            return {
                context: null,  //画布对象
                proPercent: 0,  //进度百分比
                width: 0,       //画布宽度
                height: 0,      //画布高度
                r: 0,           //圆的半径
                radian: 0,       //角度
                animateFrame: null,
                timer: null
            }
        },
        mounted(){
            this.$nextTick( this.init );
            addEventListener('resize', this.init)
        },
        destroyed(){
            removeEventListener('resize', this.init)
        },
        methods: {
            init(){
                window.cancelAnimationFrame(this.animateFrame);
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.context = null;
                    this.proPercent = 0;
                    this.width = 0;
                    this.height = 0;
                    this.radian = 0;
                    this.r = 0;
                    
                    this.getSize();         //获取大小
                    this.initCanvas()       //初始化画布对象
                }, 300);
            },
            getSize(){
                if(!(this.w && this.h)){ //如果props里面有高度就拿props里面的， 如果没有就直接自动获取
                    let element = this.$refs.circle;
                    this.width = element.offsetWidth;
                    this.height = element.offsetHeight;
                }else{
                    this.width = this.w;
                    this.height = this.h;
                }
                this.r = (this.width <= this.height ? this.width/2 : this.height/2) - this.size;    //设置半径
            },
            initCanvas(){
                let canvas = this.$refs.canvas;
                canvas.width = this.width;
                canvas.height = this.height;

                this.context = canvas.getContext('2d');
                this.animateFrame = window.requestAnimationFrame(this.startDraw);
            },
            startDraw(){
                this.clear();
                let speed = this.percent / (this.time / 16.6);
                if(this.proPercent + speed > this.percent){
                    this.proPercent = this.percent;
                }else{
                    this.proPercent += speed;
                }
                this.radian = ((this.proPercent/100)*2*Math.PI).toFixed(3);

                this.drawBg();
                this.drawArc();
                this.drawBall();
                // this.drawImg();

                if(this.proPercent >= this.percent) return;
                this.animateFrame = window.requestAnimationFrame(this.startDraw);
            },
            clear(){
                if(this.context) this.context.clearRect(0, 0, this.width, this.height);
            },
            drawBg(){
                this.context.beginPath();
                this.context.strokeStyle = this.bgColor;
                this.context.lineWidth = this.size;
                this.context.arc(this.width/2, this.height/2, this.r, 0, 2*Math.PI);
                this.context.stroke();
                this.context.closePath();

                this.context.beginPath();
                this.context.fillStyle = this.circleColor;
                this.context.arc(this.width/2,  this.height/2, this.r - this.width / 45, 0, 2*Math.PI);
                this.context.fill();
                this.context.closePath();
            },
            drawArc(number){
                this.context.strokeStyle = this.circleColor;
                this.context.lineWidth = this.size;
                this.context.beginPath();
                this.context.arc(this.width/2,  this.height/2, this.r, - this.startRadian, this.radian -this.startRadian );
                this.context.stroke();
                this.context.closePath();
            },
            drawBall(number){
                this.context.fillStyle = this.ballColor;
                let x = this.r*Math.cos(this.radian - this.startRadian) + this.width/2;
                let y = this.r*Math.sin(this.radian - this.startRadian) + this.height/2;
                // this.context.lineWidth = this.size;

                this.context.beginPath();
                this.context.arc( x, y, (this.size + 4) / 2, 0, 2*Math.PI );
                this.context.fill();
                this.context.closePath();
            },
            drawImg(){
                this.context.arc(this.width/2,  this.height/2, this.r, - this.startRadian, this.radian -this.startRadian );
                // let img = new Image();
                // img.src="static/images/login-bg.png";
                // img.onload = ()=>{
                    // let space = 4;
                    // this.context.drawImage(img, (this.width / 2) - this.r + space, (this.height / 2) - this.r + space, (this.r - space)*2, (this.r - space)*2 )
                // }
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .traffic-circle{
        width: 100%;
        height: 100%;
    }
</style>

